<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
    <form method="post" th:action="@{/orders}" th:object="${order}">
        <h1>Order your taco creations!</h1>
        <img th:src="@{/images/TacoCloud.png}" />

        <a th:href="@{/design}" id="another">Design another taco</a><br>

        <div th:if="${#fields.hasErrors()}">
            <span class="validationError">
                Please correct the probles below and resubmit.
            </span>
        </div>

        <h3>Deliver my taco masterpieces to...</h3>
        <label for="name">Name:</label>
        <input type="text" th:field="*{name}">
        <span class="validationError"
              th:if="${#fields.hasErrors('name')}"
              th:errors="*{name}">name error</span>
        <br>

        <label for="street">Street address:</label>
        <input type="text" th:field="*{street}">
        <span class="validationError"
              th:if="${#fields.hasErrors('street')}"
              th:errors="*{street}">Street Error</span>
        <br>

        <label for="city">City: </label>
        <input type="text" th:field="*{city}"/>
        <span class="validationError"
              th:if="${#fields.hasErrors('city')}"
              th:errors="*{city}">City Error</span>
        <br>

        <label for="state">State: </label>
        <input type="text" th:field="*{state}"/>
        <span class="validationError"
              th:if="${#fields.hasErrors('state')}"
              th:errors="*{state}">State Error</span>
        <br>

        <label for="zip">Zip code: </label>
        <input type="text" th:field="*{zip}"/>
        <span class="validationError"
              th:if="${#fields.hasErrors('zip')}"
              th:errors="*{zip}">Zip Error</span>
        <br>

        <h3>Here's how I'll pay...</h3>
        <label for="ccNumer">Credit Card #:</label>
        <input type="text" th:field="*{ccNumber}">
        <span class="validationError"
              th:if="${#fields.hasErrors('ccNumber')}"
              th:errors="*{ccNumber}">CC Num Error</span>
        <br>

        <label for="ccExpiration">Expiration: </label>
        <input type="text" th:field="*{ccExpiration}"/>
        <span class="validationError"
              th:if="${#fields.hasErrors('ccExpiration')}"
              th:errors="*{ccExpiration}">CC Num Error</span>
        <br>

        <label for="ccCVV">CVV: </label>
        <input type="text" th:field="*{ccCVV}"/>
        <span class="validationError"
              th:if="${#fields.hasErrors('ccCVV')}"
              th:errors="*{ccCVV}">CC Num Error</span>
        <br>

        <input type="submit" value="Submit order">
    </form>
</body>
</html>